
<template>
  <el-main>
  <el-form :inline="true" style="line-height: normal; text-align: left" >
    <el-form-item label="问卷标题">
      <el-input size="small" v-model="searchValue"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button size="small" icon="el-icon-search" @click="searchQuestion">搜索</el-button>
      <el-button size="small" icon="el-icon-error" style="color:red" @click="resetValue">重置</el-button>
      <el-button size="small" icon="el-icon-plus" style="color: white; background-color:blue" @click="handleInsert">新增</el-button>
    </el-form-item>

  </el-form>

  <el-table :data="tableList" style="line-height: normal" border>
    <el-table-column prop="questionImg" label="问卷图片" width="80" align="center">
      <template slot-scope="scope">
        <el-image style="width: 50px;height: 50px;border-radius: 50%"
        :src="scope.row.questionImg">
        </el-image>
      </template>
    </el-table-column>
    <el-table-column prop="questionTitle" label="问卷标题"></el-table-column>
    <el-table-column prop="questionDesc" label="问卷描述"></el-table-column>
    <el-table-column prop="questionOrder" label="问卷序号"></el-table-column>
    <el-table-column prop="questionStatus" label="状态">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.questionStatus == '0'" type="danger" size="normal"
        >关闭</el-tag
        >
        <el-tag v-if="scope.row.questionStatus == '1'" type="success" size="normal"
        >调查中</el-tag
        >
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="small" type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index,scope.row)">修改</el-button>
        <el-button size="small" style="background-color: red ;color: white"
                   icon="el-icon-delete" @click="deleteQuestion(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

<!--      分页图标-->
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[3, 4, 5, 6]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>

      <!--  修改问卷弹出框-->
      <el-dialog
              title="新增/修改问卷"
              :visible.sync="dialogVisible"
              width="40%"
              style="text-align: left; line-height: normal" border>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
              <el-form-item label="问卷标题" prop="questionTitle">
                  <el-input v-model="ruleForm.questionTitle"></el-input>
              </el-form-item>
              <el-form-item label="问卷描述" prop="questionDesc">
                  <el-input v-model="ruleForm.questionDesc"></el-input>
              </el-form-item>
              <el-form-item label="问卷序号" prop="questionOrder">
                  <el-input v-model="ruleForm.questionOrder"></el-input>
              </el-form-item>
              <el-form-item label="问卷状态" prop="questionStatus">
                  <el-radio-group v-model="ruleForm.questionStatus" style="text-align: left">
                      <el-radio  :label="'1'">启用</el-radio>
                      <el-radio  :label="'0'">停用</el-radio>
                  </el-radio-group>
              </el-form-item>

              <el-form-item label="问卷图片" prop="questionImg">
                  <el-upload
                          :action="onUpLoad()"
                          :on-success="onSuccess"
                          :file-list="fileList"
                          list-type="picture-card"
                          :auto-upload="true"
                          :limit="1"
                  >
                      <i slot="default" class="el-icon-plus"></i>
                      <div slot="file" slot-scope="{ file }">
                          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                          <span class="el-upload-list__item-actions">
                  <span
                          class="el-upload-list__item-preview">
<!--                          @click="handlePictureCardPreview(file)"-->
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
                      </div>
                  </el-upload>
                  <el-dialog :visible.sync="disabled">
                      <img width="40%" :src="dialogImageUrl" alt="" />
                  </el-dialog>
              </el-form-item>

              <el-form-item style="text-align: right">
                  <el-button @click="resetForm('ruleForm')" style="background-color: red; color: white">取消</el-button>
<!--                  <el-button type="primary" @click="updateValue('ruleForm')">确定</el-button>-->
                  <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
              </el-form-item>
          </el-form>
      </el-dialog>

  </el-main>

</template>

<script>
  //引入axios
  import axios from "axios";
  export default {
    name: "QuestionList",
    data(){
      return{
        tableList:[],
        currentPage: 1,
        pageSize:3,
        total:'',
        searchValue:'',
        oldTable:[],
        fileList:[],
        dialogImageUrl: "",
        disabled: false,
        dialogVisible: false,
        // updatedialogVisible:false,
        // insertdialogVisible:false,
          baseUrl: 'http://localhost:8089',
        ruleForm:{
          questionId:null,
          questionTitle:'',
          questionDesc:'',
          questionOrder:'',
          questionStatus:'',
          questionImg:''
        },
        insertForm:{},
        rules:{
          questionTitle: [
            {required:true,message:'请填写问卷标题',trigger:'blur'}
          ]
        }
      }
    },
    methods:{

      //控制新增表单是否弹出
      // handleInsert(){
      //   this.insertdialogVisible = true;
      // },

        //控制新增表单是否弹出
        handleInsert(){
            this.dialogVisible = true;
            this.ruleForm.questionId = null,
                this.ruleForm.questionTitle = null,
                this.ruleForm.questionDesc = null,
                this.ruleForm.questionOrder = null,
                this.ruleForm.questionStatus = null,
                this.ruleForm.questionImg = null
            console.log(this.ruleForm)
        },

      //点击修改按钮是否弹出弹出框控制
      // handleEdit(index,row){
      //   this.updatedialogVisible = true;
      //   this.ruleForm = row;
      // },

        //点击修改按钮是否弹出弹出框控制
        handleEdit(index,row){
            this.dialogVisible = true;
            this.ruleForm = row;
        },
        //分页功能函数
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.getQuestionList(this.currentPage,this.pageSize);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.getQuestionList(this.currentPage,this.pageSize);
        },

      //查询所有问卷并展示
      getQuestionList(currentPage,pageSize){
        // console.log("aaaaa")
        axios.get("http://localhost:8089/api/question/list",{
          params:{
            currentPage:currentPage,
            pageSize:pageSize
          }
        }).then(
          res =>{
            // console.log(res);
            this.tableList = res.data.data.records;
            this.oldTable = this.tableList;
            this.total = res.data.data.total
        },error=>{
                }
        )
      },
      //按条件搜索问卷
      searchQuestion(){
        let list = this.oldTable.filter((question)=>{
          return question.questionTitle.indexOf(this.searchValue) !== -1
        })
        this.tableList = list;
      },

      //重置的函数
      resetValue(){
        this.searchValue = "";
        this.getQuestionList(this.currentPage,this.pageSize);

      },

      //删除问卷
      deleteQuestion(row){
        console.log(row.questionId)
          if (confirm("你确定删除当前问卷吗？")){
              axios.delete('http://localhost:8089/api/question/'+row.questionId).then(
                  res =>{
                      // console.log(res);
                      this.$message({
                          message:"删除成功啦",
                          type:'success'
                      });
                      this.getQuestionList(this.currentPage,this.pageSize)
                  },
                  error=>{
                      this.$message({
                          message:"删除失败",
                          type:"error"
                      })
                  }
              )
          }

      },

  /*  //  新增问卷
      insertValue(){
        axios.post('http://localhost:8089/api/question/',this.insertForm).then(
                res =>{
                  console.log(res);
                  this.insertdialogVisible = false,
                  this.$message({
                    message:"新增成功",
                    type:'success'
                  });
                  this.getQuestionList(this.currentPage,this.pageSize)
                },
                error =>{
                  this.$message({
                    message:"新增失败",
                    type:'error'
                  })
                }
        )
      },

    //  修改问卷
      updateValue(){
        axios.put('http://localhost:8089/api/question/',this.ruleForm).then(
                res=>{
                  this.updatedialogVisible = false,
                  this.$message({
                    message:'修改成功',
                    type:'success'
                  });
                  this.getQuestionList(this.currentPage,this.pageSize)
                },
                error=>{
                 this.$message({
                   message:'修改失败',
                   type:'error'
                 })
                }
        )
      },*/

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.ruleForm.questionId !=null){
                            axios.put('http://localhost:8089/api/question/',this.ruleForm).then(
                                response =>{
                                    this.dialogVisible = false,
                                        this.$message({
                                            message:'修改成功',
                                            type:'success'
                                        });
                                    this.getQuestionList(this.currentPage,this.pageSize)
                                },
                                error =>{
                                    this.$message({
                                        message:'修改失败',
                                        type:'error'
                                    })
                                }
                            )
                        }else {
                            axios.post('http://localhost:8089/api/question/',this.ruleForm).then(
                                response =>{
                                    this.dialogVisible = false,
                                        this.$message({
                                            message:'新增成功',
                                            type:'success'
                                        });
                                    this.getQuestionList(this.currentPage,this.pageSize)
                                },
                                error =>{
                                    this.$message({
                                        message:'新增失败',
                                        type:'error'
                                    });
                                }
                            )
                        }

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },


      //图片上传成功的回调
      onSuccess(response, file, fileList) {
        console.log(response);
        console.log(file);
        console.log(fileList);
        this.ruleForm.questionImg = this.baseUrl + response;
        this.$message.success("图片上传成功!");
        console.log(this.ruleForm);
      },
      //图片删除
      handleRemove() {
        this.fileList = [];
        this.ruleForm.questionImg = "";
      },
      //图片上传请求方法
      onUpLoad() {
        return 'http://localhost:8089/api/upload/uploadImage';
      },

    },

    mounted() {
      this.getQuestionList(this.currentPage,this.pageSize);
    }


  }
</script>

<style scoped>

</style>



